<template>
  <div class="container">
    <!-- 顶部固定栏 -->
    <div class="top">
      <!-- 左侧的logo -->
      <div class="back" @click="toBack">
        &lt;{{ flag != 1 ? nameBack : Category1Name }}
      </div>
      <!-- 中间的搜索框 -->
      <div class="input">
        <van-search v-model="value" placeholder="搜索" shape="round" />
      </div>
      <!-- 右侧button -->
      <div class="button">
        <van-button plain round color="red" type="primary" size="small"
          >打开APP</van-button
        >
      </div>
    </div>

    <!-- 横向滑动 -->
    <div class="scroll" v-if="isShow">
      <div class="box">
        <div
          class="item"
          :class="currentHengxiang==item.id?'active1':''"
          v-for="(item, index) in flag != 1
            ? !Id
              ? CategoryList_second
              : Category_third
            : Category1hengxiang"
          @click="
            flag != 1
              ? changeCategory3(item.displayName, item.id)
              : changeCategory(item.displayName, item.id)
          "
        >
          {{ item.displayName }}
        </div>
      </div>
    </div>
    <!--下拉框，显示另一个div -->
    <div class="select" @click="showCategory">
      <van-icon v-if="isArrow" name="arrow-down" />
      <van-icon v-else name="arrow-up" color="red" />
    </div>
    <!-- 下拉框超过200px以后显示遮道层 -->
    <div class="empty" v-if="isEmpty" @click="showButton">
      <div>遮到层</div>
      <van-icon class="icon" color="red" name="arrow-down" />
    </div>

    <!-- 请选择分类的页面 -->
    <div class="categoryShow" v-if="!isShow">
      <div class="title">请选择分类</div>
      <div class="bottom">
        <div
          class="item"
          :class="currentHengxiang==item.id?'active1':''"
          @click="
            flag != 1
              ? changeCategory3(item.displayName, item.id)
              : changeCategory(item.displayName, item.id)
          "
          v-for="(item, index) in flag != 1
            ? !Id
              ? CategoryList_second
              : Category_third
            : Category1hengxiang"
        >
          {{ item.displayName }}
        </div>
      </div>
    </div>

    <!-- 综合排序 ，最多播放 ，最近更新三个排序 -->
    <div class="checked" v-if="isButton">
      <!-- 综合排序 -->
      <div
        class="synthesis"
        :class="{ active: currentIndex == 1 }"
        @click="handler1()"
      >
        综合排序
      </div>

      <!-- 最多播放 -->
      <div
        class="most"
        :class="{ active: currentIndex == 2 }"
        @click="handler2()"
      >
        最多播放
      </div>
      <!-- 最近更新 -->
      <div
        class="lately"
        :class="{ active: currentIndex == 3 }"
        @click="handler3()"
      >
        最近更新
      </div>
    </div>

    <!-- 卡片详情 -->
    <div class="cardAll" @scroll="handleScroll">
      <div
        class="card"
        v-for="(item, index) in flag != 1 ? DetailSinger : category1IdData"
        @click="toDetail(item)"
      >
        <div class="item">
          <div class="image">
            <img :src="'https://imagev2.xmcdn.com/' + item.albumCoverPath" />
          </div>
          <div class="detail">
            <div class="title">
              {{ item.albumTitle }}
            </div>
            <div class="introduce">
              {{ item.intro }}
            </div>
            <!-- 底部查看数当前正在听的人数 -->
            <div class="bottom">
              <div class="left">
                <!-- 小图标-->
                <van-icon name="play-circle-o" />
                <div class="count">{{ item.albumTrackCount }}</div>
              </div>
              <div class="right">
                <van-icon name="service-o" />
                <div class="learen">
                  {{
                    item.albumPlayCount >= 100000000
                      ? (item.albumPlayCount / 100000000).toFixed(2) + "亿"
                      : (item.albumPlayCount / 10000).toFixed(2) + "万"
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 收起按钮 -->
    <div class="shouqi" v-if="shouqi" @click="showShadw">
      <van-button class="button" plain hairline type="primary">收起</van-button>
    </div>

    <!-- 大的影音层 -->
    <div class="shadw" v-if="isShawd" @click="noShadw"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { reqCateList, reqDetail } from "@/api/category";

const router = useRouter();
const route = useRoute();
// 控制是否显示分类栏
const isShow = ref<boolean>(true);
// 显示向上或者向下箭头
const isArrow = ref<boolean>(true);
// 控制当前按钮是否高亮
const currentIndex = ref<any>(1);
// 是否显示遮道层
const isEmpty = ref<boolean>(false);
// 是否显示综合排序三个按钮
const isButton = ref<boolean>(true);
// 是否显示收起按钮
const shouqi = ref<boolean>(false);
// 是否显示阴影区域
const isShawd = ref<boolean>(false);
// 获取横向滚动的数据,对应一级分类下方的二级分类的数据
const CategoryList_second = ref<any>([]);
// 存储二级分类下方的三级分类的数据
const Category_third = ref<any>([]);
// 存储
const metadataValues = ref<any>("");
// 存储传递过来的name
const nameBack = ref<any>("");
// 获取到具体歌单的数据
const DetailSinger = ref<any>([]);

// 下面是获取歌单详情需要的请求参数
// ---------------------------
const pageNum = ref<any>(1);
const pageSize = ref<any>(20);
// 1:综合排序 2：最近排序 3：最多播放
const sort = ref<any>(1);
const metadataValue = ref<any>("");
// 存储id2
const Id = ref<any>("");
// ---------------------------

// 从一级分类过来该考虑的参数
// --------------------------------------------
// --------------------------------------------
// --------------------------------------------
const flag = ref<any>("");
// 一级分类过来的横向滚动数据
const Category1hengxiang = ref<any>("");
// 一级分类的id
const Category1Id = ref<any>("");
// 一级分类的名字
const Category1Name = ref<any>("");
// 一级分类对应的二级分类列表
const category1_category2List = ref<any>([]);
// 一级分类对应的歌单详情
const category1IdData = ref<any>([]);
// 一级分类横向滚动的选中状态
const currentHengxiang=ref<any>(1);


// 点击跳转详情页面
const toDetail=(item:any)=>{
  console.log(item.albumId);
  router.push({name:"Detail",params: { id: item.albumId}})
}
// 组件挂载
onMounted(() => {
  // 本地存储id
  flag.value = route.params.flag;
  // console.log(flag.value);
  // 从二级过来
  if (flag.value != 1) {
    const CateId = localStorage.getItem("id1");
    const id2 = localStorage.getItem("id2");
    if (id2) {
      // 如果二级id存在
      nameBack.value = localStorage.getItem("name");
      // console.log(nameBack.value);
      const parts = nameBack.value.split(",");
      nameBack.value = parts[length + 1];
      // console.log(nameBack.value);
    } else {
      nameBack.value = localStorage.getItem("name");
    }

    Id.value = id2;
    // 获取一级二级分类下方的列表
    const id3 = ref<any>("");
    getCategoryList(CateId, id2, id3.value);
    // 获取歌单列表
    getDetailSinger(CateId, id2);
  } else {
    // 从一级过来另外考虑，只能这样了
    // 获取到对应的二级数据
    Category1Id.value = localStorage.getItem("id1");
    // console.log(Category1Id.value);

    // 获取二级的横向排列数据

    // 没有二级id，就是首次过来
    // 获取二级分类的列表
    getCategory1List(Category1Id.value);
    // 获取当前一级分类下面的数据
    getCategory1Data(Category1Id.value);
  }
});

// 一级分类过来的时候，获取二级分类的列表
const getCategory1List = async (Category1Id: any) => {
  const title = ref<any>("");
  let result = await reqCateList(Category1Id, title.value);
  // console.log(result);

  // 存储一级分类的名字
  Category1Name.value = localStorage.getItem("name");
  // 存储二级分类列表
  category1_category2List.value = result.data.metadata[0].metadataValues;
  Category1hengxiang.value = category1_category2List.value;
};
//  一级分类过来的时候，获取对应的一级分类下方的歌单数据
const getCategory1Data = async (cate1Id: any) => {
  const name = ref<any>("");
  let result = await reqDetail(
    pageNum.value,
    pageSize.value,
    sort.value,
    cate1Id,
    name.value
  );
  // console.log(result);
  category1IdData.value = result.data.albums;
};
// 点击切换二级分类
const changeCategory = (name: any, id: any) => {
  currentHengxiang.value=id;
  // console.log(name);
  // 把二级分类的name存在本地存储
  const id12 = localStorage.getItem("id12");

  if (!id12) {
    localStorage.setItem("name2", name);
  } else {
    localStorage.setItem("name3", name);
  }

  // console.log(id);
  // 同时获取到三级分类的横向滚动条
  getCategory3IdList(id);
};

// 获取三级分类的列表
const getCategory3IdList = async (id2: any) => {
  const id1 = localStorage.getItem("id1");
  let result = await reqCateList(id1, "");
  // console.log(result);
  // 筛选出对应的二级分类的数据
  const Category2IdList = result.data.metadata[0].metadataValues.find(
    (item: any) => {
      return item.id == id2;
    }
  );

  // 先获取id12，判读是不是第一次点击横向滚动
  const id12 = localStorage.getItem("id12");
  // 第一次点击横向滚动
  if (!id12) {
    // 当前应该存储二级id，方便后面判断
    localStorage.setItem("id12", id2);
    // console.log(Category2IdList);
    // 把当前的返回栏换掉
    Category1Name.value = Category2IdList.displayName;
    Category1hengxiang.value = Category2IdList.metadataValues[0].metadataValues;

    // 发送请求获取到二级分类的歌单详情
    getCategory2Data();
  } else {
    // 第二次点击横向滚动，这个时候应该发送请求了
    // console.log("第二次点击横向滚动");
    // 删除掉当前的二级id，存储新的二级id
    localStorage.removeItem("id12");
    localStorage.setItem("id12", id2);
    // 发请求获取二级分类的歌单详情
    getCategory3Data();
  }
};
// 发请求获取三级分类的歌单详情
const getCategory3Data = async () => {
  const id1 = localStorage.getItem("id1");
  const name3 =
    localStorage.getItem("name2") + "," + localStorage.getItem("name3");
  let result = await reqDetail(
    pageNum.value,
    pageSize.value,
    sort.value,
    id1,
    name3
  );
  // console.log(result);
  category1IdData.value = result.data.albums;
};

// 获取二级分类的歌单详情
const getCategory2Data = async () => {
  // 一级分类的id
  const id1 = localStorage.getItem("id1");
  const name2 = localStorage.getItem("name2");
  let result = await reqDetail(
    pageNum.value,
    pageSize.value,
    sort.value,
    id1,
    name2
  );
  // console.log(result);
  category1IdData.value = result.data.albums;
};

// ------------------------------

// 点击二级分类切换三级分类
const changeCategory3 = (name3: any, id3: any) => {
  // 通过判断，如果二级id存在，那么此时点击的就是三级id
  // 如果二级id不存在，那么此时点击的就是二级id
  // 本地存储三级分类的id
  // console.log(name3);
  currentHengxiang.value=id3
  // --------------------------------------
  const id2 = localStorage.getItem("id2");
  // 如果有二级id
  if (id2) {
    // 如果有三级id
    localStorage.setItem("id3", id3);
    const name12 = ref<any>("");
    name12.value = localStorage.getItem("name");
    // console.log(name12.value);
    const parts = name12.value.split(",");
    const a = parts.slice(1).join(",");
    const name = a + "," + name3;
    // console.log(name);
    // 本地存储id
    const CateId = localStorage.getItem("id1");
    const id2 = localStorage.getItem("id2");
    metadataValue.value = name;
    // console.log(metadataValue.value);
    // 获取详情歌单
    getDetailSinger(CateId, id2);
  }
  // ----------------------------------------
  else {
    // 没有二级id，那么就是从一级id过来的
    // 1:需要切换横向滑动的数据，切换为三级分类的数据
    // 2:需要发送请求获取当前点击的二级分类的数据
    // 本地存储二级id
    // localStorage.setItem('id2',id3);
    const CateId = localStorage.getItem("id1");
    const id2 = localStorage.getItem("id2");
    // 获取一级二级分类下方的列表
    getCategoryList(CateId, id2, id3);
    // 获取歌单详情
    getDetailSinger(CateId, id2);
  }
};

// 获取分类列表
const getCategoryList = async (CateId: any, id2: any, id3: any) => {
  let result = await reqCateList(CateId, metadataValues.value);

  if (!id2) {
    // 如果第一次是一级分类过来的，再次点击了二级分类,这个时候已经有三级id了
    if (!id3) {
      // 点击一级id过来的
      // console.log("点击一级分类过来的");
      // 存储二级分类
      CategoryList_second.value = result.data.metadata[0].metadataValues;
      // 往里面添加第一项
      CategoryList_second.value.unshift({ displayName: "全部" });
      // 点击一级分类过来的，展示当前的二级分类
      // console.log(CategoryList_second.value);
      // 存储三级分类
      Category_third.value = result.data.metadata[0].metadataValues;
      // console.log(Category_third.value);
    } else {
      // 这个时候已经有三级id了，代表是第一次从一级分类过来
      // 然后接着点击了二级分类，这个时候需要跳转到三级分类
      // console.log("第一次点击一级分类，接着点击二级分类");
      CategoryList_second.value = result.data.metadata[0].metadataValues;
      // console.log(CategoryList_second.value);
      const dataCate = CategoryList_second.value.find((item: any) => {
        return item.id == id3;
      });
      // console.log("这是c----------------");
      // console.log(dataCate);
      nameBack.value = dataCate.displayName;
      CategoryList_second.value = dataCate.metadataValues[0].metadataValues;
      // console.log(Id.value);
      // console.log(CategoryList_second.value);
      // 删除三级id，存储二级id
      localStorage.removeItem("id3");
      localStorage.setItem("id2", id3);
    }
  } else {
    // 有二级id
    // console.log(id3);
    // console.log("点击二级分类过来的");
    // 此时需要展示的横向滚动为二级分类下方的三级分类数据
    // console.log(result.data.metadata[0].metadataValues);

    CategoryList_second.value = result.data.metadata[0].metadataValues.find(
      (item: any) => {
        return item.id == id2;
      }
    );
    // console.log(CategoryList_second.value);
    Category_third.value =
      CategoryList_second.value.metadataValues[0]?.metadataValues;
    // console.log(Category_third.value);
  }
};
// 获取歌单详情列表
const getDetailSinger = async (CateId: any, id2: any) => {
  if (!id2) {
    // 一级分类过来的
    let result = await reqDetail(
      pageNum.value,
      pageSize.value,
      sort.value,
      CateId,
      metadataValue.value
    );
    // console.log(result);
    DetailSinger.value = result.data.albums;
    // console.log(DetailSinger.value);
  } else {
    // 二级分类过来的话
    const id3 = localStorage.getItem("id3");
    // console.log(id3)
    // 判断是否有三级分类
    if (!id3) {
      // 如果没有三级分类的id
      metadataValue.value = localStorage.getItem("name");
      const parts = metadataValue.value.split(",");
      metadataValue.value = parts.slice(1).join(", ");
      // console.log(metadataValue.value);
    }

    // console.log(metadataValue.value);
    let result = await reqDetail(
      pageNum.value,
      pageSize.value,
      sort.value,
      CateId,
      metadataValue.value
    );
    DetailSinger.value = result.data.albums;
  }
};

// 点击显示请选择分类的页面
const showCategory = () => {
  // console.log("点击了");
  isShow.value = !isShow.value;
  // console.log("是否显示下拉框" + isShow.value);
  isArrow.value = !isArrow.value;
  // console.log("显示向上还是向下箭头" + isArrow.value);
};

// 点击遮道层显示按钮以及下方变为阴影
const showButton = () => {
  isButton.value = true;
  isEmpty.value = false;
  shouqi.value = true;
  isShawd.value = true;
};
// 是否显示阴影
const showShadw = () => {
  isShawd.value = false;
  shouqi.value = false;
  // console.log("点击了收起按钮");
};
// 点击阴影，隐藏取消按钮并且隐藏阴影
const noShadw = () => {
  isShawd.value = false;
  shouqi.value = false;
};
// 监听滚动距离
const handleScroll = (evnet) => {
  // console.log(event.target.scrollTop);
  // 当距离为200的时候，显示
  if (event.target.scrollTop > 200) {
    isEmpty.value = true;
    isButton.value = false;
  } else {
    isEmpty.value = false;
    isButton.value = true;
  }
};
// 第一个按钮的回调
const handler1 = () => {
  if (flag.value != 1) {
    currentIndex.value = 1;
    sort.value = 1;
    const CateId = localStorage.getItem("id1");
    const id2 = localStorage.getItem("id2");
    getDetailSinger(CateId, id2);
  } else {
    currentIndex.value = 1;
    sort.value = 1;
    const CateId = localStorage.getItem("id1");
    getCategory1Data(CateId);
  }
};
// 第二个按钮的回调
const handler2 = () => {
  if (flag.value != 1) {
    currentIndex.value = 2;
    sort.value = 2;
    const CateId = localStorage.getItem("id1");
    const id2 = localStorage.getItem("id2");
    getDetailSinger(CateId, id2);
  } else {
    currentIndex.value = 2;
    sort.value = 2;
    const CateId = localStorage.getItem("id1");
    getCategory1Data(CateId);
  }
};
// 第三个按钮的回调
const handler3 = () => {
  if (flag.value != 1) {
    currentIndex.value = 3;
    sort.value = 3;
    const CateId = localStorage.getItem("id1");
    const id2 = localStorage.getItem("id2");
    getDetailSinger(CateId, id2);
  } else {
    currentIndex.value = 3;
    sort.value = 3;
    const CateId = localStorage.getItem("id1");
    getCategory1Data(CateId);
  }
};

// 回退到上一个历史版本
const toBack = () => {
  localStorage.removeItem("id2");
  localStorage.removeItem("id1");
  localStorage.removeItem("id3");
  localStorage.removeItem("name");
  localStorage.removeItem("id12");
  localStorage.removeItem("name2");
  router.go(-1);
};
</script>

<style scoped lang="less">
.container {
  width: 375px;
  position: relative;
  height: 667px;
  overflow: hidden;
  // 顶部部分
  .top {
    position: fixed;
    // background-color: #fff;
    top: 0px;
    height: 60px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    padding: 0 0 0 10px;
    box-sizing: border-box;
    border-radius: 2px;
    // white-space: nowrap;
    // border-bottom: 6px solid #f0f0f0;
    // 左侧的Logo样式
    .back {
      // width: 180px;
      font-size: 18px;
      overflow: hidden;
      white-space: nowrap;
    }
    // 中间的搜索框的样式
    .input {
      margin-top: 6px;
      // margin-left: 10px;
      padding: 0px !important;
      background-color: #edf1f9;
      width: 200px;
    }
    .button {
      width: 100px;
    }
  }
  // 遮道层样式
  .empty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 110px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #ff4f1c;
    text-align: center;
    // border:1px solid green;
    background-color: rgba(255, 255, 255, 0.5);
    .icon {
      margin-left: 20px;
    }
  }

  // 横向滑动部分
  .scroll {
    position: absolute;
    top: 62px;
    height: 40px;
    width: 100%;
    overflow: scroll;
    border: 2rpx solid green;
    border-bottom: 2px solid #eee;

    .box {
      // width: 3000px;
      display: flex;

      .item {
        font-size: 16px;
        margin: 0 10px;
        height: 40px;
        color: #a2a2b6;
        line-height: 40px;
        flex-shrink: 0;
      }
    }
  }
  // 下拉选择框
  .select {
    z-index: 11;
    position: absolute;
    top: 68px;
    right: 0;
    height: 30px;
    border-left: 2px solid #a2a2b6;
    width: 40px;
    color: #a1a1bf;
    text-align: center;
    background-color: #fff;
    line-height: 30px;
  }

  // 选择分类的页面
  .categoryShow {
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    width: 100%;
    top: 60px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #ffffff;
    .title {
      width: 100%;
      font-size: 16px;
      line-height: 40px;
      padding-left: 10px;
      color: #a2a2b6;
      border-bottom: 2px solid #e8e8e8;
      height: 40px;
    }
    .bottom {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      .item {
        // border:2px solid green;
        margin: 10px;
        padding: 3px 30px;
        font-size: 16px;
        height: 28px;
        line-height: 28px;
        border-radius: 5px;
        background-color: #f3f4f7;
      }
    }
  }

  // 综合排序部分
  .checked {
    position: absolute;
    top: 110px;
    width: 100%;
    height: 30px;
    line-height: 26px;
    // border:2px solid green;
    display: flex;
    font-size: 16px;
    color: #a2a2b6;
    .synthesis {
      margin: 0 10px;
      padding: 2px 5px;
    }
    .most {
      margin: 0 10px;
      padding: 2px 5px;
    }
    .lately {
      margin: 0 10px;
      padding: 2px 5px;
    }
  }
  .cardAll {
    width: 100%;
    position: absolute;
    top: 140px;
    height: 100%;
    overflow: scroll;
    .card {
      width: 100%;
      padding: 15px 10px 15px 0;
      height: 108px;
      border-bottom: 1px solid #f3f4f7;
      .item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
        // box-sizing:border-box;
        .image {
          width: 85px;
          margin-right: 10px;
          img {
            width: 100%;
          }
        }
        // 详情部分
        .detail {
          padding-left: 10px;
          padding-right: 10px;
          box-sizing: border-box;
          width: 265px;
          // 标题部分
          .title {
            display: -webkit-box; /* 设置为弹性盒子 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            -webkit-line-clamp: 1; /* 最多显示两行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超过两行显示为省略号 */
            font-size: 16px;
            color: #333;
          }
          // 介绍部分
          .introduce {
            display: -webkit-box; /* 设置为弹性盒子 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            -webkit-line-clamp: 3; /* 最多显示两行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超过两行显示为省略号 */
            color: #999999;
            margin: 5px 0 7px;
            font-size: 13px;
            line-height: 1.38;
          }
          // 下方显示正在听的人数
          .bottom {
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #a2a2a2;
            .left {
              display: flex;
              align-items: center;
              width: 40px;
              justify-content: space-around;
              margin-right: 30px;
            }
            .right {
              display: flex;
              width: 100px;
              justify-content: space-around;
              align-items: center;
            }
          }
        }
      }
    }
  }
  // 收起按钮
  .shouqi {
    position: absolute;
    top: 100px;
    right: 0;
    .button {
      height: 26px;
      border: 1px solid #eee;
      background-color: #f3f4f6;
      color: #a0a0ad;
      border-radius: 20px;
    }
  }
  .shadw {
    position: absolute;
    top: 140px;
    width: 100%;
    background-color: rgba(178, 178, 178, 0.5);
    height: 530px;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
}
</style>

<style lang="less" scoped>
// 用于控制高亮效果
.active {
  border-radius: 20px;
  border: 1px solid red;
  color: red;
}
.active1 {
  border-bottom: 5px solid blueviolet;
  font-size: 18px !important;
  color:red !important
  // padding-bottom: 2px;
}
</style>
